import { Space, Table, Tag } from 'antd';
import AMapLoader from '@amap/amap-jsapi-loader';
import React, { useEffect, useState } from 'react';
import maker from '../asset/pic/marker.png'
import startMarkerIcon from '../asset/pic/startMarker.png'
import endMarkerIcon from '../asset/pic/endMarker.png'
const PopTable = (props) => {
    // console.log(props.map);
    
    const{map,setLineMockData,tableMockData}=props
    // var path = [
    //     [103.291461,29.580049],
    //     [103.290684,29.579188],
    //     [103.290217,29.577836],
    //     [103.289016,29.576791]
    //   ];
    useEffect(()=>{
        setContnet({
            zhishu:[
                (Math.random()*10).toFixed(2),
                (Math.random()*10).toFixed(2),
                (Math.random()*10).toFixed(2),
                (Math.random()*10).toFixed(2),
                (Math.random()*10).toFixed(2),
                (Math.random()*10).toFixed(2),
                (Math.random()*10).toFixed(2),
                (Math.random()*10).toFixed(2),
                (Math.random()*10).toFixed(2),
                (Math.random()*10).toFixed(2),
                (Math.random()*10).toFixed(2),
                (Math.random()*10).toFixed(2),
                (Math.random()*10).toFixed(2),
            ],
            sudu:[
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
            ],
            lxsj:[
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
            ],
            yssj:[
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
                ((Math.random()*10)*3).toFixed(2),
            ]
        })
    },[tableMockData])
    const handleClick = (path) => {
        AMapLoader.load({
            key:"20f82c7a86e45f5da26e815931a775d0",                     // 申请好的Web端开发者Key，首次调用 load 时必填
            version:"2.0",              // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins:['AMap.DistrictSearch'],   
        }).then((AMap)=>{
            map.clearMap()
            var startMarker = new AMap.Marker({
                position: new AMap.LngLat(path[0][0],path[0][1]),
                extData:{
                    name:'start'
                },
                // 将一张图片的地址设置为 icon
                icon:new AMap.Icon({            
                    image: startMarkerIcon ,
                    // size: new AMap.Size(22, 28),  //图标所处区域大小
                    imageSize: new AMap.Size(50,50) //图标大小
                }),   
                // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
                offset: new AMap.Pixel(-27,-47),
                //层级范围
                zooms: [2, 15]
            });
            var endMarker = new AMap.Marker({
                position: new AMap.LngLat(path[path.length-1][0],path[path.length-1][1]),
                extData:{
                    name:'start'
                },
                // 将一张图片的地址设置为 icon
                icon:new AMap.Icon({            
                    image: endMarkerIcon ,
                    // size: new AMap.Size(22, 28),  //图标所处区域大小
                    imageSize: new AMap.Size(50,50), //图标大小
                    
                }),   
                // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
                offset: new AMap.Pixel(-27,-47),
                //层级范围
                zooms: [2, 20]
            });
            map.add([startMarker,endMarker])
            var polyline = new AMap.Polyline({
                path: path,
                isOutline: true,
                outlineColor: '#ffeeff',
                borderWeight: 1,
                strokeColor: "red",
                strokeOpacity: 1,
                strokeWeight: 4,
                // 折线样式还支持 'dashed'
                strokeStyle: "solid",
                // strokeStyle是dashed时有效
                strokeDasharray: [2, 1],
                lineJoin: 'round',
                lineCap: 'round',
                zIndex: 50,
              })
              map.add(polyline)
              map.setFitView();
        })
        let mockData = []
        let test = '2022/09/11 00:00:00'
        for(let i=0;i<80;i++){
          let time = Date.parse(test)+600000*i
          let value 
          if(i<70){
            value = 0 + Math.random().toFixed(2)
          }else{
           value = (Math.random()*10).toFixed(2)
          }
          let arr = [time,value ]
          mockData.push(arr)
        }
        setLineMockData(mockData)
    }
    const [content,setContnet] = useState({
        zhishu:[
            (Math.random()*10).toFixed(2),
            (Math.random()*10).toFixed(2),
            (Math.random()*10).toFixed(2),
            (Math.random()*10).toFixed(2),
            (Math.random()*10).toFixed(2),
            (Math.random()*10).toFixed(2),
            (Math.random()*10).toFixed(2),
            (Math.random()*10).toFixed(2),
            (Math.random()*10).toFixed(2),
            (Math.random()*10).toFixed(2),
            (Math.random()*10).toFixed(2),
            (Math.random()*10).toFixed(2),
            (Math.random()*10).toFixed(2),
        ],
        sudu:[
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
        ],
        lxsj:[
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
        ],
        yssj:[
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
            ((Math.random()*10)*3).toFixed(2),
        ]
    })
    return(
        <div  style={{width:'100%',height:'100%',color:'white'}}>
            <table id="pop_table">
                <thead>
                <tr>
                    <th>路段ID</th>
                    <th>道路名称</th>
                    <th>拥堵延时指数</th>
                    <th>速度</th>
                    <th>旅行时间</th>
                    <th>延迟时间</th>
                </tr>
                </thead>
                <tbody>
                    {
                        tableMockData.map((item,index)=>{
                            return(
                                <tr onClick={()=> handleClick(item.path) } key={index}>
                                    <td>{index}</td>
                                    <td>
                                        <div>{item.name}</div>
                                        <div>{item.area}</div>
                                    </td>
                                    <td>{content.zhishu[index]}</td>
                                    <td>{content.sudu[index]}</td>
                                    <td>{content.lxsj[index]}</td>
                                    <td>{content.yssj[index]}</td>
                                 </tr>
                            )
                        })
                    }
                </tbody>
            </table>
        </div>
    )
}



export default PopTable ;